<template>
  <AppLayout>
    <div class="container">
      <div class="centered-div" v-for="(doctor, index) in paginatedData" :key="index" @click="goToDetails(doctor)">
        <div class="image-wrapper">
          <image-preview class="doctor-image" :src="doctor.touxiang" />
        </div>
        <span class="doctor-name">{{ doctor.yishengxingming }}</span>
      </div>
    </div>

    <div class="pagination">
      <button @click="currentPage--" :disabled="currentPage <= 1">上一页</button>
      <span>Page {{ currentPage }}</span>
      <button @click="currentPage++" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from './Layout1.vue';
import { listDoctors} from "@/api/DoctorSys/Doctors";
export default {
  name: 'HomePage',
  components: {
    AppLayout,
  },
  data() {
    return {
      DoctorsList: [],
      currentPage: 1,
      itemsPerPage: 6,
      // 存放图片信息的列表
      // images: [
      //   { id: 0, idView: require('./static/images/choose-us-img1.jpg' )},
      //   { id: 1, idView: require('./static/images/choose-us-img3.jpg') },
      //   // 可以根据需求继续添加更多图片信息
      // ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询医生列表 */
    getList() {
      this.loading = true;
      listDoctors(this.queryParams).then(response => {
        this.DoctorsList = response.rows;
        this.loading = false;
      }).catch(error => {
        console.error("获取医生列表失败:", error);
        this.loading = false;
      });
    },
    goToDetails(doctor) {
      // 假设你的详情页面路由设置为'/doctor-details/:id'
      // 请确保`doctor`对象中有一个`id`属性可以进行链接
      console.log('Doctor ID:', doctor.id);
      this.$router.push({ name: 'Details', params: { id: doctor.id }});
    },
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.DoctorsList.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.DoctorsList.length / this.itemsPerPage);
    }

  },
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 修改为center来居中所有的子元素 */
  align-items: center;
  padding: 10px;
}
.centered-div {
  flex: 0 0 calc(25% - 20px); /* 图片宽度 */
  display: flex;
  flex-direction: column;
  height: 300px; /* 容器高度 */
  margin: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
}
.pagination {
  display: flex;
  justify-content: center; /* 水平居中所有子元素 */
  margin-top: 20px; /* 距离顶部的距离 */
}
.image-wrapper {
  height: 88%; /* 设置为容器高度的80% */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  overflow: hidden; /* 避免内容溢出 */
}

.doctor-image {
  width: 100%; /* 宽度填充包含容器 */
  height: 100%; /* 高度填充包含容器 */
  object-fit: fill; /* 强制图片填充整个容器，不考虑它的原始比例 */
}

.doctor-name {
  height: 12%; /* 文本区域高度设置为容器高度的20% */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center;
}
</style>
